//左上 柱状图
$(document).ready(function() {
    function fetchDataAndUpdate(globalName) {
        $.get(`http://127.0.0.1:5000/task1b/marketName=${globalName}`).done(function (data) {
            var myCharts = echarts.init(document.querySelector('.panel .wordCloud'))
            option = {
                "title": {
                    "text": "全国水果销量",
                    x: "center",
                    y: "2%",
                    textStyle: {
                        color: '#fff',
                        fontSize: '15'
                    }
                },
                tooltip: {
                    show: true,
                    formatter: '{b}: {c}',
                },
                series: [{
                    data: data.wordCloud,
                    type: 'wordCloud',
                    shape: 'circle',
                    gridSize: 1,
                    layoutAnimation: false, // 关闭布局动画
                    sizeRange: [20, 120],  // 调整词云中词语的大小范围
                    rotationRange: [-60, 60],  // 调整词语的旋转角度范围
                    textStyle: {
                        normal: {
                            fontFamily: 'Arial, sans-serif',
                            fontWeight: 'bold',
                            color: function () {
                                let r = Math.round(Math.random() * 160);
                                let g = Math.round(Math.random() * 160);
                                let b = Math.round(Math.random() * 160);
                                return `rgb(${r}, ${g}, ${b})`;
                            },
                            fontSize: function (params) {
                                // 根据 value 属性动态计算字体大小
                                return Math.log(params.value) / 10000;
                            }
                        }
                    },
                    
                    emphasis: {
                        textStyle: {
                            shadowBlur: 10,
                            shadowColor: '#333'
                        }
                    },
                }]
            };
            myCharts.setOption(option);
        });
    }
    fetchDataAndUpdate(window.globalName)
    $(document).on('globalNameChanged', function(event, globalName) {
        fetchDataAndUpdate(window.globalName)
    })
})